<#assign baseURL = springMacroRequestContext.getContextPath() />
<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>拓深科技</title>
<#include "./css.ftl">
</head>
<body>
<div id="wrapper">

<#include "./left_nav.ftl">

    <div id="page-wrapper" class="gray-bg dashbard-1">
    <#include "./top_nav.ftl">
        <div class="row wrapper border-bottom white-bg page-heading">
            <div class="col-lg-9">
                <h2>数据导入导出</h2>
                <ol class="breadcrumb">
                    <li>
                        消防可视化管理系统
                    </li>
                    <li class="active">
                        数据导入导出
                    </li>
                </ol>
            </div>
        </div>
    <div class="wrapper wrapper-content" >
    <#if (role_type_id < 3 )>
            <div class="row">
                <div class="col-md-12">
                    <div class="col-md-4">
                        <div class="panel panel-primary">
                            <div class="panel-heading">
                                报警信息
                            </div>
                            <div class="panel-body">
                                <div class="">
                                    <div class="form-group" style="margin: 5px 5px 5px 5px;">
                                        <label>时间范围</label>
                                        <input id="dateRange" type="text"  class="form-control myDateRange">
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-12">
                                        <div class="col-md-4 pull-right" style="padding-right: 5px;">
                                            <button id="alarmLogBtn" type="button" class="btn btn-block btn-inverse"><i class="fa fa-download"></i>&nbsp;&nbsp;导&nbsp;出</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="col-md-4">
                        <div class="panel panel-primary">
                            <div class="panel-heading">
                                误报信息
                            </div>
                            <div class="panel-body">
                                <div class="">
                                    <div class="form-group" style="margin: 5px 5px 5px 5px;">
                                        <label>时间范围</label>
                                        <input id="dateRangeFault" type="text"   class="form-control myDateRange">
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-12">
                                        <div class="col-md-4 pull-right" style="padding-right: 5px;">
                                            <button id="faultLogBtn" type="button" class="btn btn-block btn-inverse"><i class="fa fa-download"></i>&nbsp;&nbsp;导&nbsp;出</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="col-md-4">
                        <div class="panel panel-primary">
                            <div class="panel-heading">
                                故障信息
                            </div>
                            <div class="panel-body">
                                <div class="">
                                    <div class="form-group" style="margin: 5px 5px 5px 5px;">
                                        <label>时间范围</label>
                                        <input id="dateRangeWrong" type="text"   class="form-control myDateRange">
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-12">
                                        <div class="col-md-4 pull-right" style="padding-right: 5px;">
                                            <button id="wrongBtn" type="button" class="btn btn-block btn-inverse"><i class="fa fa-download"></i>&nbsp;&nbsp;导&nbsp;出</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
            <div class="row">
                <div class="col-md-12">
                    <div class="col-md-4">
                        <div class="panel panel-primary">
                            <div class="panel-heading">
                                监测点信息
                            </div>
                            <div class="panel-body">
                                <button id="monitorAllBtn" type="button" class="btn btn-block btn-inverse"><i class="fa fa-download"></i>&nbsp;&nbsp;导出所有数据</button>
                                <button id="monitorTemplateBtn"  type="button" class="btn btn-block btn-inverse"><i class="fa fa-download"></i>&nbsp;&nbsp;监测点导入模板</button>
                                <form id="monitorForm" target="blankFrame" enctype="multipart/form-data" method="post" action="${baseURL}/import/monitor/xlsImport">
                                    <input id="monitorFile" type="file" name="file"   class="form-control" style="margin-top: 4px;margin-bottom: 4px;">
                                    <button id="monitorImportBtn" type="submit" class="btn btn-block btn-info"><i class="fa fa-upload"></i>&nbsp;&nbsp;导入数据</button>
                                </form>
                                <div class="col-md-12" style="margin-top: 4px;padding: 0 0 0 0; text-align: center;">
                                    <iframe src="about:blank" name="blankFrame" id="blankFrame" ></iframe>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="panel panel-primary">
                            <div class="panel-heading">
                                设备信息
                            </div>
                            <div class="panel-body">
                                <button id="deviceAllBtn" type="button" class="btn btn-block btn-inverse"><i class="fa fa-download"></i>&nbsp;&nbsp;导出所有数据</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
    <#else >
        <div class="row">
            <div class="widget red-bg p-lg text-center">
                <div class="m-b-lg">
                    <i class="fa fa-bell fa-4x" style="margin-bottom: 20px"></i>
                    <h1 class="font-bold no-margins">
                        权限不足
                    </h1>
                </div>
            </div>
        </div>
    </#if>
    </div>
    <#include "./bottom_nav.ftl">
    </div>

</div>


<#include "./js.ftl">
<script src="assets/js/jquery.fileDownload.js"></script>
<script>
    $(function(){
        socketInit("//" + getURL() + "${baseURL}");

        //报警记录日期时间选择
        $(".myDateRange").daterangepicker({
            format : 'YYYY-MM-DD HH:mm:ss',
            locale : {
                applyLabel : '确定',
                cancelLabel : '取消',
                fromLabel : '起始时间',
                toLabel : '结束时间',
                customRangeLabel : '自定义',
                daysOfWeek : [ '日', '一', '二', '三', '四', '五', '六' ],
                monthNames : [ '一月', '二月', '三月', '四月', '五月', '六月',
                    '七月', '八月', '九月', '十月', '十一月', '十二月' ],
                firstDay : 1
            }
        });

        //导出报警记录按钮
        $("#alarmLogBtn").click(function(){
            var timeStr = $("#dateRange").val();
            var startDate = new Date(timeStr.substring(0,18));
            var endDate = new Date(timeStr.slice(22));
            if ( Object.prototype.toString.call(startDate) === "[object Date]" &&  Object.prototype.toString.call(endDate) === "[object Date]") {
                if ( isNaN( startDate.getTime() / 1000 ) || isNaN( endDate.getTime() / 1000 ) ) {
                    swal({
                        title: "请点选正确的时间段。",
                        type: "warning"
                    });
                }
                else {
                    var url = "${baseURL}/export/alarm/getAlarm?start=" + (startDate.getTime() / 1000) + "&end=" + (endDate.getTime() / 1000);
                    getXls(url);
                }
            }
            else {
                swal({
                    title: "请点选正确的时间段。",
                    type: "warning"
                })
            }
        });

        $("#faultLogBtn").click(function(){
            var timeStr = $("#dateRangeFault").val();
            var startDate = new Date(timeStr.substring(0,18));
            var endDate = new Date(timeStr.slice(22));
            if ( Object.prototype.toString.call(startDate) === "[object Date]" &&  Object.prototype.toString.call(endDate) === "[object Date]") {
                if ( isNaN( startDate.getTime() / 1000 ) || isNaN( endDate.getTime() / 1000 ) ) {
                    swal({
                        title: "请点选正确的时间段。",
                        type: "warning"
                    });
                }
                else {
                    var url = "${baseURL}/export/alarm/getAlarm?start=" + (startDate.getTime() / 1000) + "&end=" + (endDate.getTime() / 1000) + "&type=误报";
                    getXls(url);
                }
            }
            else {
                swal({
                    title: "请点选正确的时间段。",
                    type: "warning"
                })
            }
        });

        $("#wrongBtn").click(function(){
            var timeStr = $("#dateRangeWrong").val();
            var startDate = new Date(timeStr.substring(0,18));
            var endDate = new Date(timeStr.slice(22));
            if ( Object.prototype.toString.call(startDate) === "[object Date]" &&  Object.prototype.toString.call(endDate) === "[object Date]") {
                if ( isNaN( startDate.getTime() / 1000 ) || isNaN( endDate.getTime() / 1000 ) ) {
                    swal({
                        title: "请点选正确的时间段。",
                        type: "warning"
                    });
                }
                else {
                    var url = "${baseURL}/export/alarm/getAlarm?start=" + (startDate.getTime() / 1000) + "&end=" + (endDate.getTime() / 1000) + "&type=故障";
                    getXls(url);
                }
            }
            else {
                swal({
                    title: "请点选正确的时间段。",
                    type: "warning"
                })
            }
        });

       $("#monitorTemplateBtn").click(function(){
        getXls("${baseURL}/export/monitor/template");
        });

        $("#monitorAllBtn").click(function(){
            getXls("${baseURL}/export/monitor/getAllMonitor");
        });

        $("#deviceAllBtn").click(function(){
            getXls("${baseURL}/export/device/getAll");
        });

        //导入监测点数据
        $("#monitorForm").submit(function(){
            /*     swal({
                     title: "你导入了监测点数据。",
                     type: "info"
                 });*/
        });

    });



    function getXls(url){
        $.fileDownload(url, {
            successCallback: function(file_url){

            },
            failCallback: function(file_html, file_url){
                console.log(file_html);
                var err = JSON.parse(file_html.substring(59,file_html.length - 6));
                swal({
                    title: err.error,
                    type:"warning"
                });
            }
        });
    }

</script>
</body>
</html>